import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// 获取原型对象push函数
const originalPush = VueRouter.prototype.push;

// 获取原型对象replace函数
const originalReplace = VueRouter.prototype.replace;

// 修改原型对象中的push函数
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

// 修改原型对象中的replace函数
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch((err) => err);
};

import Layout from "@/layout";

/**
 * 注意:子菜单只在路由子菜单长度>= 1时出现。
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   设置为true 菜单隐藏 默认false
 * alwaysShow: true               如果设置为true，将始终显示根菜单
 *                                如果没有设置alwaysShow，当item有多个子路由时，
 *                                它将变成嵌套模式，否则不显示根菜单
 * redirect: noRedirect           设置 noRedirect 不会在面包屑（breadcrumb）中重定向
 * name:'router-name'             keep-alive组件使用此属性判断（必须设置）（保持与入口文件name一致）
 * meta : {
    roles: ['admin','editor']     控制动态路由
    title: 'title'                导航栏和面包屑中显示此名称
    icon: 'svg-name'/'el-icon-x'  导航栏的图标名称 支持svg和element-icon
    noCache: true                 设置为true时此页面将不会被缓存（默认false）
    affix: true                   如果设置为true，页签将不允许关闭
    breadcrumb: false             如果设置为false，此页面不会显示在面包屑中(默认为true)
    activeMenu: '/example/list'   如果设置了路径，侧边栏将突出显示您设置的路径
  }
 */

// 静态路由 不会做权限过滤
export const constantRoutes = [
  {
    path: "/redirect",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "/redirect/:path(.*)",
        component: () => import("@/views/Redirect"),
      },
    ],
  },
  {
    path: "/err-page",
    component: () => import("@/views/ErrPage"),
    hidden: true,
  },
  {
    path: "/401",
    component: () => import("@/views/401"),
    hidden: true,
  },
  {
    path: "/404",
    component: () => import("@/views/404"),
    hidden: true,
  },
];

// 动态路由 根据meta.roles做权限过滤
export const asyncRoutes = [
  {
    path: "/home",
    component: Layout,
    redirect: "/home/index",
    children: [
      {
        path: "index",
        component: () => import("@/views/Home"),
        name: "HomePage",
        meta: { title: "首页", icon: "el-icon-s-home", affix: true },
      },
    ],
  },
  {
    path: "/setting",
    component: Layout,
    redirect: "/setting/index",
    children: [
      {
        path: "index",
        component: () => import("@/views/Home"),
        name: "SettingPage",
        meta: { title: "设置", icon: "el-icon-s-home", roles: ["setting"] },
      },
    ],
  },
  { path: "*", redirect: "/err-page", hidden: true },
];

const createRouter = () =>
  new VueRouter({
    // mode: 'history', // 路由模式
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes,
  });

const router = createRouter();

export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // 重置路由
}

export default router;
